<template>
  <div class="table-wrap">
    <div class="table-header table-row">
      <div v-for="col in cols" :class="[col.width?'flex'+col.width:'']">{{col.value}}
      </div>
    </div>
    <div class="table-content">
      <div class="table-row" v-for="(data, index) in datas">
        <template v-for="(col, colnum) in cols">
          <div :class="[col.width?'flex'+col.width:'']">{{data[col.code]}}</div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    props: {
      cols: {
        type: Array,
        default: function () {
          return [{
            code: 'attr',
            value: '参数'
          }, {
            code: 'desc',
            value: '说明'
          }, {
            code: 'type',
            value: '类型'
          }, {
            code: 'option',
            value: '可选值'
          }, {
            code: 'default',
            value: '默认值'
          }];
        }
      },
      datas: {
        type: Array,
        default: function () {
          return [{
            attr: 'readonly',
            desc: '完全只读',
            type: 'Boolean',
            option: '—',
            default: 'false'
          }, {
            attr: 'disabled',
            desc: '禁用',
            type: 'Boolean',
            option: '—',
            default: 'false'
          }];
        }
      }
    }
  };
</script>
<style>
  .table-wrap{
    box-sizing: border-box;
    width: 880px;
  }
  .table-wrap>
  .table-header{
    display: flex;
    background-color: lightgray;
  }

  .table-wrap
  .table-row{
    display: flex;
    border-bottom: 1px solid lightgray;
  }

  .table-wrap
  .table-row>
  div{
    flex: 1;
    padding: 10px;
  }

  .table-wrap
  .table-row>
  .flex2{
    flex: 2;
  }

  .table-wrap
  .table-row>
  .flex3{
    flex: 3;
  }

  .table-wrap
  .table-row>
  .flex4{
    flex: 4;
  }
</style>
